<template>
	<view class="container">
		<view class="wrapper">
			<image class="logo" src="/static/logo.png"></image>
				<form @submit="formSubmit" @reset="formReset">
					<view class="form">
						<view class="form-title">登录</view>
						<view class="uni-form-item uni-column">
								<view class="title">账号</view>
								<input class="uni-input" name="formData.account" v-model="formData.account" placeholder="请输入您的账号" />
						</view>
						<view class="uni-form-item uni-column">
								<view class="title">密码</view>
								<input class="uni-input" password='true' name="formData.password" v-model="formData.password" placeholder="请输入您的密码" />
						</view>
            <view class="uni-form-item uni-column uni-column-code">
            		<view class="title">验证码</view>
            		<input class="uni-input" v-model="formData.code" name="formData.code" placeholder="请输入验证码" />
                <img :src="imgStr" alt="" class="yzCode" @click="getCode">
            </view>
					</view>	
					<view class="uni-btn-v">
							<button class="form-btn" form-type="submit">登录</button>
					</view>
			</form>
		</view>
	</view>
</template>
<script>
  import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
  import {setToken, clearLocalStrorage, setUserInfo} from '@/common/LocalDataUtil'
	export default {
		data() {
			return {
				title: 'Hello',
        imgStr: '',
        formData: {}
			}
		},
		onLoad() {
			this.getCode()
		},
		methods: {
      getCode () {
        this.$api.getCaptch().then(resp => {
          if (resp && resp.code === '200') {
            this.imgStr = resp.data
          }
        })
      },
      beforeSubmit () {
        let pwd = this.encryptorPassword()
        if (pwd) {
          this.primaryPwd = this.formData.password
          this.formData.password = pwd
          this.formData.passwordEncryption = true
          return true
        } else {
          this.$message({
            message: '请填写密码!',
            type: 'warning'
          })
        }
        return false
      },
			formSubmit (e) {
        this.$api.login(this.formData).then(resp => {
          if (resp && resp.code === '200') {
            // if (this.primaryPwd === '12345678' || this.primaryPwd === '123456') sessionStorage.setItem('simplePasswd', true)
            let data = resp.data
            setToken(data.token)
            setUserInfo(data.userInfo)
            // this.$router.push({ path: '/pages/index/index' })
            uni.switchTab({
                url: '/pages/index/index'
            });
          } else {
            this.getCode()
            // 清空密码
            this.formData.password = this.primaryPwd
            this.formData.code = ''
          }
        })
			},
      encryptorPassword () {
        let pwd = this.formData.password
        let publicKey = '-----BEGIN PUBLIC KEY-----'+ 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6khyfD1Yt3YiCgQWMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNRaY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB' +'-----END PUBLIC KEY-----';
        if (pwd && publicKey) {
          return jsencrypt.setEncrypt(publiukey, this.formData.password)
        }
        return null
      }
		}
	}
</script>
<style scoped>
	.wrapper {
		overflow: hidden;
		background: url(../../static/img/bg.jpg) no-repeat;
		background-size: 100% auto;
	}
	.logo {
		display: block;
		height: 100rpx;
		width: 100rpx;
		margin-top: 150rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100rpx;
	}
	.form {
		width: 690rpx;
		/* height: 597rpx; */
		padding: 60rpx 50rpx 37rpx;
		margin: 0px auto 55rpx;
		border-radius: 15rpx;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0px 8px 10px rgba(0,0,0,.1);
	}
	.form-title {
		margin-bottom: 60rpx;
		font-size: 50rpx;
		color: #000;
	}
	.title {
		margin-bottom: 14rpx;
		font-size: 32rpx;
	}
	.uni-form-item {
		margin-bottom: 58rpx;
		background: #fff;
	}
	.uni-input {
		height: 70rpx;
		border-bottom: 1rpx solid #dcdcdc;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #c0c0c0;
	}
	.uni-input-input {
		background: #fff;
	}
	.form-btn {
		width: 690rpx;
		height: 90rpx;
		margin:0 auto;
		border-radius: 0;
		line-height: 90rpx;
		text-align: center;
		background: #cc9c6e;
		font-size: 34rpx;
		color: #fff;
	}
  .uni-column-code {
    position: relative;
  }
  .yzCode {
    position: absolute;
    right: 0;
    bottom: 2upx;
    height: 55rpx;
  }
</style>